<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
        DJManager
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="${rc.contextPath}/static/images/favicon.ico" type="image/x-icon" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
    <meta HTTP-EQUIV="Expires" CONTENT="0">
    <link rel="stylesheet" href="${rc.contextPath}/static/css/x-admin.css" media="all">
    <!--<link rel="stylesheet" href="${rc.contextPath}/static/css/animate.min.css" media="all">-->
    <script src="${rc.contextPath}/static/lib/vue.min.js"></script>
    <script src="${rc.contextPath}/static/lib/jquery.min.js"></script>
    <style>
        body{
            width: 100%;
            height: 100%;

        }
        .layui-layout-admin{
            position: fixed;
            top:0;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(190deg, #1f3960 0%, #496d97 30%, #a7adb7 70%, #7f8591 100%)center top no-repeat;
            z-index: 0;
        }
        .layui-layout-admin .header{
            background: none;
        }
        .layui-layout-admin .layui-side{
            background: none;
        }
        @font-face {
            font-family: 'iconfont';
            src: url('${rc.contextPath}/static/font/iconfont.eot');
            src: url('${rc.contextPath}/static/font/iconfont.eot?#iefix') format('embedded-opentype'), url('${rc.contextPath}/static/font/iconfont.woff') format('woff'), url('${rc.contextPath}/static/font/iconfont.ttf') format('truetype'), url('${rc.contextPath}/static/font/iconfont.svg#iconfont') format('svg');
        }

        .iconfont {
            font-family: "iconfont" !important;
            font-size: 20px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -webkit-text-stroke-width: 0.2px;
            -moz-osx-font-smoothing: grayscale;
            color: #ffffff;
            font-weight: normal;
        }
        .icon {
            width: 1.5em; height: 1.5em;
            vertical-align: -0.5em;
            fill: currentColor;
            overflow: hidden;
            background-color: rgba(255,255,255,0.3);
            padding: 3px 3px;
            border-radius: 15px;
            margin-right: 5px;
        }
        /*.header>.layui-main>.layui-nav>.layui-nav-item>a:hover{
            color: #666;
        }*/
        .header>.layui-main>.layui-nav>.layui-nav-item>a>.iconfont{
            padding: 3px 10px 0 0;
        }
        .header>.layui-main>.layui-nav>.layui-nav-item{
            margin-right: 10px;
        }
        .header>.layui-main>.layui-nav>.layui-nav-item a{
            width: 100px;
            padding: 0;
            display: inline-block;
            text-align: center;
            font-weight: normal;
            color: #ffffff;
        }
        .layui-nav .layui-nav-item a{
            font-weight: bold;
        }
        .layui-nav-tree .layui-nav-child a{
            font-weight: normal;
        }
        .layui-tab-card>.layui-tab-title li{
            margin-top: 7px;
            /*background-color: #ffffff;*/
            /*margin-right: 10px;
            padding-right: 10px;*/
            /*border:1px solid #e9eff5;*/
            border-right: 1px solid #dddddd;
        }
        .layui-tab-card>.layui-tab-title{
            padding: 0;
        }
        .layui-tab-bar{
            z-index: 99;
        }
        .layui-tab-card>.layui-tab-title .layui-this{
            /*font-weight: bold;*/
            color: #69aae1;
            line-height: 40px;
            border: 0;
            border-right: 1px solid #dddddd;
            border-bottom: 3px solid #69aae1;
            background: none;
        }
        .layui-tab-title li{
            line-height: 40px;
        }
        /*.layui-tab-card>.layui-tab-title{
            height: 60px;
        }*/
        .layui-tab-title .layui-this:after{
            border:0;
        }
        .layui-tab-title{
            border-bottom: 0;
        }
        .layui-tab-title li .layui-tab-close{
            color: #dddddd;
        }
        .layui-nav-child{
            /*background-color: rgba(0,0,0,0.15);
            border:0;*/
        }
        .header>.layui-main>.layui-nav>.layui-nav-item dd a{
            color: #666;
        }
        .site-demo-title{
            background-color: #f7f7f7;
            border:4px solid rgba(0,0,0,0.5);
        }
        .layui-tab-card>.layui-tab-title{
            background: none;
            border-bottom: 1px solid #dfdfdf;
        }
        .site-demo-body .page{
            width: 0;
            height: 0;
            border-bottom: 15px solid #f7f7f7; /* left arrow slant */
            border-top: 15px solid rgba(0,0,0,0.5); /* right arrow slant */
            border-right: 15px solid rgba(0,0,0,0.5); /* bottom, add background color here */
            border-left: 15px solid #f7f7f7;
            font-size: 0;
            line-height: 0;
            position: absolute;
            top:0;
            right: 0;
            box-shadow: 1px 1px 10px 6px  #e5e5e5;
        }
        body .site-demo-nav .layui-nav-item{
            border-radius: 5px;
        }
        .layui-layout-admin .layui-side{
            margin-left: 10px;
        }
        .layui-nav-tree .layui-nav-bar{
            margin-top: 10px;
            background-color: #ffffff;
            right: 0;
        }
        .layui-nav-itemed>a{
            background-color: rgba(0,0,0,0.15);
        }
        .layui-nav .layui-nav-item a{
            color: #ffffff;
        }
        .layui-nav .layui-nav-item a:hover{
            background-color: rgba(0,0,0,0.15);
        }
        .layui-nav-tree .layui-nav-child a{
            color: #ffffff;
        }
        .logo:hover{
            color: #ffffff;
        }
        .newTip{
            width: 350px;
            height: 235px;
            position: fixed;
            bottom: 40px;
            right: 30px;
        }
        .tipMain{
            width: 100%;
            margin: 0 auto;
         }
        .newTip>.tipMain>h4{
            color: #ffffff;
            width: 100%;
            line-height: 45px;
            height:45px;
            font-size: 18px;
            text-align: center;
            background: url("../static/images/tiptitle.png")top center no-repeat;
            background-size: 100% 100%;
            position: relative;
        }
        .newTip>.tipMain>h4>span{
            display: inline-block;
            width: 45px;
            height: 45px;
            font-size: 30px;
            line-height: 45px;
            position: absolute;
            right: 0;
            cursor: pointer;
        }
        .newTip>.tipMain>div{
            width: 100%;
            height: 190px;
            background-color: #ffffff;
            box-shadow: 1px 1px 5px 1px #e8e8e8;
            border-bottom-left-radius: 3px;
            border-bottom-right-radius: 3px;
        }
        /*.newTip>.tipMain>div>.ellipsis{
            font-size: 14px;
            line-height: 24px;
            width: 90%;
            margin: 0 auto;
            padding: 20px 0;
            color: #666666;
            border-bottom: 1px solid #e8e8e8;
        }*/
        .newTip>.tipMain>div>div{
            font-size: 14px;
            line-height: 24px;
            text-align: center;
            width: 90%;
            margin: 0 auto;
            padding: 15px 0;
            color: #666666;
            border-bottom: 1px solid #e8e8e8;
        }
        .newTip>.tipMain>div>div>.ellipsis{
            text-align: left;
            padding: 5px 0;
            height: 50px;
        }
        .newTip>.tipMain>div>div>.tipTitle{
            font-size: 16px;
        }
        .newTip>.tipMain>div>div>p{
            font-size: 14px;
        }
        .newTip>.tipMain>div>a{
            line-height: 40px;
            width: 90%;
            margin: 0 auto;
            padding: 5px 0;
            color: #5eabed;
            display: block;
            text-align: center;
        }
        .messageTip{
            color: #ffffff;
            background-color: #fe7c7c;
            border-radius: 5px;
            font-size: 12px;
            font-weight: normal;
            padding: 1px 5px;
            font-style: normal;
            margin-left: 5px;
        }
        .messageNum{
            color: #ffffff;
            background-color: #fe7c7c;
            border-radius: 10px;
            font-size: 12px;
            font-weight: normal;
            padding: 1px 7px;
            font-style: normal;
            margin-left: 5px;
        }

    </style>
</head>

<body>
<div class="layui-layout layui-layout-admin">
    #parse ("/common/header.html")
    #parse ("/common/menu.html")

    <div class="layui-tab layui-tab-card site-demo-title x-main" lay-filter="x-tab" lay-allowclose="true">
        <div class="x-slide_left"></div>
        <ul class="layui-tab-title">
            <li class="layui-this">
                我的桌面
                <i class="layui-icon layui-unselect layui-tab-close">| ဆ</i>
            </li>
        </ul>
        <div class="layui-tab-content site-demo site-demo-body">
            <p class="page"></p>
            <div class="layui-tab-item layui-show">
                <iframe frameborder="0" src="welcome.html" class="x-iframe"></iframe>
            </div>
        </div>
    </div>

    <div class="site-mobile-shade"></div>
</div>

<div class="newTip" style="display: none;">
    <!--<div class="tipMain">
        <h4>消息通知 <span id="closeTip">×</span></h4>
        <div>
            <div>
                <p class="tipTitle">标题</p>
                <p class="ellipsis">消息通知消息通知消息通知消息通知消息通知消息通知消息通知消息通知消息通知消息通知</p>
                <p><span>状态</span><span>会议</span></p>
            </div>
            <a href="">查看详情 »</a>
        </div>
    </div>-->
</div>

<script src="${rc.contextPath}/static/lib/jquery.min.js"></script>
<script src="${rc.contextPath}/static/lib/layui/layui.js" charset="utf-8"></script>
<script src="${rc.contextPath}/static/lib/x-admin.js"></script>
<script src="${rc.contextPath}/static/lib/iconfont.js"></script>
<script>

    var vm = new Vue({
        el:'#menuList',
        data:{
            menuList: [],
            msgNum:""
        },
        methods: {
            getMenus: function (event) {
                var _this = this;
                $.ajax({
                    type: "POST",
                    url: "getMenus.do",
                    dataType: "json",
                    success: function(result){
                        _this.menuList = result.menusList;
//                        console.log(_this.menuList);

                        /*绑定菜单事件*/
                        init();
                    }
                });
            },
            getMsgNum:function(){
                var _this = this;
                $.ajax({
                    type: "POST",
                    url: "../../messages/getMassage.do",
                    dataType: "json",
                    success: function(data){
                            _this.msgNum = data.result.num;
//                        console.log(data);
                        /*绑定菜单事件*/

                    }
                });
            }
        },
        created:function(){
            this.getMenus();
            this.getMsgNum();
        }
    });

$(window).on("load",function(){
//    $(function(){
       $(".layui-tab-title").on("click","li",function(){
           console.log("点击成功");
           console.log(vm.menuList);
           var navText = $(this).text();
           console.log(navText+'-------nav');
           $(".layui-layout-admin .layui-side dd").removeClass("layui-this");
           $(vm.menuList).each(function(index,menu){
               menu.subMenu.forEach(function(subMenu,i){
                   if(navText.indexOf(subMenu.name) != -1){
                       $(".layui-layout-admin .layui-side dd:contains("+subMenu.name+")").addClass("layui-this")
                       return false;
                   }
               });
           });//on事件结束

//           console.log(navText+'-------------nav');
//           $(".layui-side").find("dd").each(function(value,index){
//               var sideText = $(value).text();
//               console.log(sideText+'-----------side');
//               if(navText == sideText){
//                   $(".layui-nav li").addClass("layui-nav-itemed").find('dd').addClass("layui-this").sibling().removeClass("layui-this");
//
//               }
//           });
       });
//    }());
    });
    $(function() {
        ellipsis();
        function ellipsis() {
            var text = document.getElementsByClassName('ellipsis');
            for (var i = 0; i < text.length; i++) {
                str = text[i].innerHTML;
                        textLeng = 30;
                if (str.length > textLeng) {
                    text[i].innerHTML = str.substring(0, textLeng) + "...";
                }
            }
        }

        $("#closeTip").click(function () {
            $(".newTip").hide();
        });


        function funcTest(){
            //循环显示
                /*setTimeout(function(){
                    $(".newTip").show();
                },1000);*/
            window.setInterval(function () {
                $.ajax({
                    type: "POST",
                    url: "messages/getMass.do",
                    dataType: "json",
                    success: function(res){
//                        console.log(res);
                        if(res.result.messageBean == null||res.result.messageBean==''){
                            $(".newTip>div").empty();
                        }else {
                            if(res.result.messageBean.status == 0&&res.result.messageBean.type == 0 ){
                                $(".newTip>div").empty();
                                var div = '<div class="tipMain">'+
                                        '<h4>消息通知 <span id="closeTip">×</span></h4>'+
                                        '<div>'+
                                        '<div>'+
                                        '<p class="tipTitle">'+res.result.messageBean.title+'</p>'+
                                        '<p class="ellipsis">'+res.result.messageBean.content+'</p>'+
                                        '<p><span>消息状态: 一般</span> &nbsp; &nbsp; &nbsp; &nbsp;<span>消息类型: 请假</span></p>'+
                                        '</div>'+
                                        '<a href="../../messages/getmesinfo.do?id="'+res.result.messageBean.id+'>查看详情 »</a>'+
                                        '</div>'+
                                        '</div>';
                                $(".newTip").append(div);
                            }else if(res.result.messageBean.status == 0&&res.result.messageBean.type == 1){
                                $(".newTip>div").empty();
                                var div1 = '<div class="tipMain">'+
                                        '<h4>消息通知 <span id="closeTip">×</span></h4>'+
                                        '<div>'+
                                        '<div>'+
                                        '<p class="tipTitle">'+res.result.messageBean.title+'</p>'+
                                        '<p class="ellipsis">'+res.result.messageBean.content+'</p>'+
                                        '<p><span>消息状态: 一般</span> &nbsp; &nbsp; &nbsp; &nbsp;<span>消息类型: 私信</span></p>'+
                                        '</div>'+
                                        '<a href="../../messages/getmesinfo.do?id="'+res.result.messageBean.id+'>查看详情 »</a>'+
                                        '</div>'+
                                        '</div>';
                                $(".newTip").append(div1);
                            }else if(res.result.messageBean.status == 1&&res.result.messageBean.type == 0){
                                $(".newTip>div").empty();
                                var div2 = '<div class="tipMain">'+
                                        '<h4>消息通知 <span id="closeTip">×</span></h4>'+
                                        '<div>'+
                                        '<div>'+
                                        '<p class="tipTitle">'+res.result.messageBean.title+'</p>'+
                                        '<p class="ellipsis">'+res.result.messageBean.content+'</p>'+
                                        '<p><span>消息状态: 紧急</span> &nbsp; &nbsp; &nbsp; &nbsp;<span>消息类型: 请假</span></p>'+
                                        '</div>'+
                                        '<a href="../../messages/getmesinfo.do?id="'+res.result.messageBean.id+'>查看详情 »</a>'+
                                        '</div>'+
                                        '</div>';
                                $(".newTip").append(div2);
                            }else if(res.result.messageBean.status == 1&&res.result.messageBean.type == 1){
                                $(".newTip>div").empty();
                                var div3 = '<div class="tipMain">'+
                                        '<h4>消息通知 <span id="closeTip">×</span></h4>'+
                                        '<div>'+
                                        '<div>'+
                                        '<p class="tipTitle">'+res.result.messageBean.title+'</p>'+
                                        '<p class="ellipsis">'+res.result.messageBean.content+'</p>'+
                                        '<p><span>消息状态: 紧急</span> &nbsp; &nbsp; &nbsp; &nbsp;<span>消息类型: 私信</span></p>'+
                                        '</div>'+
                                        '<a href="../../messages/getmesinfo.do?id="'+res.result.messageBean.id+'>查看详情 »</a>'+
                                        '</div>'+
                                        '</div>';
                                $(".newTip").append(div3);
                            }
                        }


                    }
                });
                $(".newTip").show();
            },3000);
                window.setInterval(function () {
                    $(".newTip").hide();
                },5000);
            }

        window.onload = funcTest();


    });
</script>
</body>
</html>
